<template>
  <div class="ltp-container container">
    <VmGoodsText 
    :title="['限时购']"
    :moreHref="{
        name: '限时购',
        hrefUrl: 'https://www.vmall.com/portal/activity/index.html?pageId=401000131&isShowLayout=false&callapp=no'
    }">
        <template #content>
            <p class="goods-text-tips 
            animate__animated animate__fadeIn">{{textTips}}</p>
        </template>
    </VmGoodsText>
    <ul>
        <a v-for="item in goodsData" :key="item.title"
        href="https://www.vmall.com/portal/activity/index.html?pageId=401000131&isShowLayout=false&callapp=no">
            <VmGoodsCard
            class="margin_right_10px goods__card-hover"
            width='230px' height='306px'
            :imgInfo="{
                imgSrc: item.imgUrl,
                width: '177px',
                height: '155px'
            }"
            :goodsInfo="{
                title: item.title,
                titleStyle: {
                    fontWeight: '700'
                },
                titleSpanStyle: {
                    whiteSpace: 'pre-wrap',
                    textAlign: 'center'
                },
                desc: item.desc,
                price: item.price,
                oldPrice: item.oldPrice
            }"
            />
        </a>
    </ul>
  </div>
</template>

<script>
import { ref } from 'vue'
import VmGoodsText from '@/components/vm-goods-part/vm-goods-text'
import VmGoodsCard from '@/components/vm-goods-part/vm-goods-card'
import { getLtp } from '@/api/home'

export default {
  name: 'LimitedTimePurchasePart',
  components: {
    VmGoodsText,
    VmGoodsCard
  },
  setup () {
    const textTipsList = ['每天限量7折30台,先到先得!','华为Mate50即将上市!',
    '加入会员尊享多重权益','以旧换新最高可抵5折','9月6日华为全场景新品发布会不容错过']
    const textTips = ref(textTipsList[0])
    const nextTextTips = ref(1)
    setInterval(() => {
        textTips.value = textTipsList[nextTextTips.value]
        nextTextTips.value++
        nextTextTips.value%=textTipsList.length
    },10000)

    const goodsData = ref([])
    getLtp().then(data => {
        goodsData.value = data.data
    })

    return { textTips, goodsData }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/styles/goods-card.scss';
.ltp-container {
    position: relative;
    top: -430px;
    .goods-text-tips {
        font-size: 20px;
        line-height: 26px;
        color: #f95959;
        animation-iteration-count: infinite;
    }
    .animate__animated.animate__fadeIn {
        animation-duration: 10s;
    }

    ul {
        display: flex;
        flex-direction: row;
    }
}
</style>